import React from 'react';
import { TabBar } from 'antd-mobile';
import propsType from 'prop-types';
import{ withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

@withRouter
@connect(
state => state
)
class NavLinkBar extends React.Component{
	static propsType = {
		data:propsType.array.isRequired
	}
	render(){
		const navList = this.props.data.filter(v => !v.hide);
		const pathname = this.props.location.pathname;
		return (
		<div>
			<TabBar>
				{navList.map(v => (
					<TabBar.Item
						badge={v.path === '/message' ? this.props.chat.unread : 0}
						title={v.text}
						key={v.path}
						icon={{uri:require(`../img/${v.icon}.png`)}}
						selectedIcon={{uri:require(`../img/${v.icon}_active.png`)}}
						selected={pathname === v.path}
						onPress={() => {
							this.props.history.push(v.path);
						}}
					>
					</TabBar.Item>
				))}
			</TabBar>
		</div>
		)
	}
}

export default NavLinkBar